<template>
	<view class="bigBg">
		<view class="form">
			<view class="item">				
				<image class="preIcon" src="../../../static/login/login/phone.png" mode=""></image>
				<input v-model="phone" placeholder="请输入手机号" type="number"/>
			</view>
			<view class="item">
				<image class="preIcon pass" src="../../../static/login/login/pass.png" mode=""></image>
				<input v-if="passType" v-model="pass" placeholder="请输入密码" type="password"/>
				<input v-else v-model="pass" placeholder="请输入密码" type="text"/>
				<view  @click="changePassSee" class="paddingBox">					
					<image class="see" :src="passType ? '../../../static/login/login/noSee.png' : '../../../static/login/login/see.png'" mode=""></image>			
				</view>
			</view>
			<view class="ctrBox">
				<view @click="goRegister" class="left">立即注册</view>
				<view class="right">忘记密码</view>
			</view>
			<button class="submitBtn" hover-class="submitBtnClick" @click="login" type="default">登录</button>			
			<view @click="isRead = !isRead" class="readXy">
				<image class="select" :src="isRead ? '../../../static/login/login/selected.png' : '../../../static/login/login/noSelect.png'" mode=""></image>
				<view class="txt">
					我已阅读并同意
					<text class="text">《用户服务协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>	
	export default {
		data() {
			return {
				phone: '',
				pass: '',
				// true:密码, false明文
				passType: true,
				// 是否已阅读协议
				isRead: true
			};
		},
		methods: {
			goRegister() {
				uni.navigateTo({
					url: '../register/register',
					animationType: "slide-in-bottom"
				})
			},
			changePassSee() {
				this.passType = !this.passType;
			},
			login() {
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				setTimeout(() => {
					uni.hideLoading();
				}, 1000)
			},
		}
	}
</script>

<style lang="less">
.paddingBox{
	padding: 20rpx;
	
}
.bigBg{
	width: 750rpx;
	height: 100vh;
	background: url(../../../static/login/login/bg.png)no-repeat center rgb(18,16,37);
	background-size: cover;	
	position: relative;
	.form{
		position: absolute;
		width: 690rpx;
		height: 678rpx;
		background: rgba(29, 30, 51, .8);
		margin: auto;
		left: 0;
		right: 0;
		bottom: 42rpx;
		padding: 0 70rpx;
		border-radius: 20rpx;
		.item{
			display: flex;
			align-items: center;
			height: 144rpx;
			width: 100%;
			border-bottom: 1px solid rgba(119, 128, 140, 1);
			.preIcon{
				width: 34rpx;
				height: 52rpx;
			}
			.pass{
				width: 36rpx;
				height: 48rpx;
			}
			input{
				height: 100%;
				font-size: 32rpx;
				line-height: 144rpx;
				margin-left: 30rpx;
				flex: 1;
				color: #fff;
			}
			.see{
				width: 34rpx;
				height: 28rpx;
			}
		}
		.ctrBox{
			height: 118rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			color: rgba(119, 128, 140, 1);
			.left{
				color: rgba(1, 216, 194, 1);
			}
		}
		.submitBtn{
			width: 550rpx;
			height: 88rpx;
			background: rgba(1, 217, 194, 1);
			border-radius: 8rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 36rpx;
			color: rgba(255, 255, 255, 1);
		}
		.submitBtnClick{
			opacity: .8;
		}
		.readXy{
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			.select{
				width: 20rpx;
				height: 20rpx;
			}
			.txt{
				margin-left: 4rpx;
				color: rgba(88, 87, 102, 1);
				font-size: 22rpx;
				.text{
					color: rgba(189, 188, 188, 1);
				}
			}
		}
	}
}
</style>
